<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用$.get()方法</title>
    <link rel="stylesheet" href="./news.css">
</head>
<body>
    <div id="container">
        <nav>
            <ul>
                <li>电视类</li>
                <li>电影类</li>
                <li>明星类</li>
                <li>音乐类</li>
                <li>体育类</li>
                <li>财经类</li>
                <li>军事类</li>
            </ul>
        </nav>
        <article>
            
        </article>
    </div>
</body> 
<script src="./jquery.js"></script>
<script>
    $(document).ready(function(){
        //设置中的分类
        function setNav(index=0){
            $("#container nav ul li").removeClass();//删除菜单栏所有li标签的类名
            $(`#container nav ul li:nth-child(${index+1})`).addClass("active");//为索引对应的元素添加active选中类
            // 当设置完分类后 获取分类对应的新闻
            let newsCate =[
             "BA10TA81wangning",//电视
             "BD2A9LEIwangning",//电影
             "BD2AB5L9wangning",//明星
             "BD2AC4LMwangning",//音乐
             "BA8E6OEOwangning",//体育
             "BA8EE5GMwangning",//财经
             "BAI67OGGwangning",//军事
            ];
            //切换
            $("article").html("")
            //newsCate[index取出来分类对应的字符串]
            //调用getnews将字符串传递到getnews方法形参中
            getNews(newsCate[index])
        }
        setNav(0)

        // 切换分类事件
        $("#container nav ul li").click(function(){
            let idx = $(this).index();// 获取点击的li元素索引
            setNav(idx)// 调用封装好方法 设置选中效果
        })
       function getNews(c){
       // $.get(网址，数据，回调函数)
       // 没事数据给服务器时写一个空对象
       $.get(`https://3g.163.com/touch/reconstruct/article/list/${c}/10-20.html`,{},function (res){
        let end = res.length-10;
        let jsonData = res.substr(9,end); 
        let objectData = JSON.parse(jsonData); 
        //objectData["da10ta81wangning"]只能取出一个分类的数据 使用形参c代替da10ta81wangning可以灵活获取
        let nwesList = objectData[c];
        for(let i = 0; i < nwesList.length; i++){
            // 取出新闻对象 赋值给变量elemNews
            let elemNews = nwesList[i];
            // 把elemNews内的数据绑定到n变量字符串中
            let n=`<div class="news">
                <div class="left">
                    <img src="${elemNews.imgsrc}" alt="{elemNews.title}">
                </div>
                <div class="right">
                    <h2>${elemNews.title}</h2>
                    <p>${elemNews.digest}</p>
                    <div>
                        <time>${elemNews.ptime}</time>
                        <span>${elemNews.source}</span>
                        <span>评论${elemNews.commentCount}</span>
                    </div>
                </div>
            </div>`
            // 使用jquery把新闻插入到网页上
            $("article").append( $(n) );// $(n) 将n中html字符串转换成jQuery可操的jque对象
        }
        })
    }   
    })
</script>
</html>